<template>
    <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh"> -->
    <div class="dakuang">
        <div class="header">
            <!-- <van-search v-model="value" placeholder="请输入搜索关键词" /> -->
            <h1>城市</h1>
            <input type="text" class="in" placeholder="卡姿兰大眼睛" @click="gosearch">
            <div>
                <h1 v-if="userid" @click="userfn">我的</h1>
                <!-- <router-link to="/login" v-else>登录</router-link> -->
                <h1 v-else @click="qdenglu">登录</h1>
            </div>

        </div>
        <bannerr :swiperArr="swiperArr" v-if="swiperArr.length > 0"></bannerr>
        <van-grid :column-num="5">
            <van-grid-item v-for="item in gridList" :key="item.id" :icon="item.url" :text="item.text" />
        </van-grid>
        <div class="shuju">
            <div class="pingpu">
                <h1>京东秒杀</h1>
                <span>22点</span>
                <van-count-down :time="time">
                    <template #default="timeData">
                        <span class="block">{{ timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.seconds }}</span>
                    </template>
                </van-count-down>
            </div>
            <ul class="miaoshaul">
                <li v-for="item in miaoshaArr" :key="item.id">
                    <img :src="item.img1" alt="">
                </li>
            </ul>
            <ul class="shangpinArr">
                <li v-for="item in spArr" :key="item.proid" @click="tdxq(item.proid)">
                    <img :src="item.img1" alt="">
                    <p>{{ item.proname }}</p>
                    <h5>${{ item.originprice }}</h5>
                </li>

                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell v-for="item in list" :key="item" :title="item" />
                </van-list>

            </ul>
        </div>
    </div>
    <!-- </van-pull-refresh> -->
</template>

<script setup lang="ts">
import bannerr from '@/components/banner.vue'
import { banner } from '@/api/banner'
import { sp } from '@/api/shangpin'
import { miaosha } from '@/api/miaosha'
import { onMounted, ref, type Ref } from 'vue'
import { useRouter } from 'vue-router'
// import { useUserStore } from '@/store/userstore'
// // 为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()
// import { storeToRefs } from 'pinia'
//  // 创建userStore 对象
// const userStore = storeToRefs(useUserStore());
// // 取出该对象模块中的userId 属性,这个pinia 中存储的数据
// console.log(userStore);
//  const { userId } = userStore;
const userid: any = localStorage.getItem('userid')
// import { Toast } from 'vant';
const loading = ref(false)
const qiehuan = ref(true)
const count = ref(1);
const finished = ref(false)
const router = useRouter()
const time = ref(30 * 60 * 60 * 1000);
const list = ref([]);
const swiperArr = ref([]);
type gridItem = {
    id: number
    text: string
    url: string
}
type miaoshaArrr = {
    img1: string,
    // alt:string
    [propName: string]: any
}
type sparr = {
    img1: string,
    originprice: string,
    proname: string,
    proid: string,
    [keys: string]: any
}
const miaoshaArr: Ref<Array<miaoshaArrr>> = ref([])
const spArr: Ref<Array<sparr>> = ref([])
const userfn = () => {
    router.push('/user')
}
// 跳转到搜索页
const gosearch = () => {
    router.push('/search')

}
const qdenglu = () => {
    router.push('/login')
}
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    sp({ count: count.value++, limitNum: 10 }).then((res: any) => {
        console.log('sp', res);
        if (res.code == '200') {
            spArr.value = spArr.value.concat(res.data)
            // spArr.value += res.data
            // 加载状态结束
            loading.value = false;
            //    / 数据全部加载完成
            if (count.value == 16) {
                finished.value = true;
            }
        }
        //  /
    })

};
const onRefresh = () => {
    //   setTimeout(() => {
    //     Toast('刷新成功');
    //     loading.value = false;
    //     count.value++;
    //   }, 1000);
    // 清空列表数据

    finished.value = false;
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    // 重新设置页数为第一页
    count.value = 1
    onLoad();
};
// const miaoshaArr=ref([])


// 宫格导航数据
const gridList: gridItem[] = [
    {
        id: 1,
        text: '京东超市',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',
    },
    {
        id: 2,
        text: '数码电器',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',
    },
    {
        id: 3,
        text: '京东新百货',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg',
    },
    {
        id: 4,
        text: '京东生鲜',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',
    },
    {
        id: 5,
        text: '京东到家',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg',
    },
    {
        id: 6,
        text: '京东超市',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',
    },
    {
        id: 7,
        text: '数码电器',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',
    },
    {
        id: 8,
        text: '京东新百货',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg',
    },
    {
        id: 9,
        text: '京东生鲜',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',
    },
    {
        id: 10,
        text: '京东到家',
        url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg',
    },
]

onMounted(() => {
    banner({}).then(res => {
        console.log(res);
        swiperArr.value = res.data
    })
    miaosha({}).then(res => {
        console.log('miaosha', res);
        miaoshaArr.value = res.data
    })
})

// 跳转到详情页
const tdxq = (id: string) => {
    router.push({ path: '/xq', query: { id: id } })
}




</script>
<style lang="scss" scoped>
// .dakuang{
//   margin-top: -50px;

.header {
    width: 100%;
    height: 30px;
    background-color: red;
    display: flex;
    justify-content: space-between;

    h1 {
        font-size: 10px;
    }

    .in {
        width: 80%;
        height: 30px;
        border: none;
        text-indent: 20px;
        color: #000;
        border-radius: 15px;
    }
}

.shuju {
    width: 90%;
    margin: 10px auto;
    // height: 2000px;
    background-color: antiquewhite;

    .miaoshaul {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;

        li {
            img {
                width: 100%;
                height: 100%;
            }
        }

    }

    .shangpinArr {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;

        li {
            width: 50%;
            // height: 220px;
            display: flex;
            // margin-top: 1px;
            flex-direction: column;
            justify-content: center;

            // align-items: center;
            img {
                width: 168px;
                height: 168px;
            }

            // p{
            // width: 100%;
            // font-size:12px;
            // height: 29px;
            // line-height: 14px;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow:ellipsis;
            // margin: 0;
            // }
            p {
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            h5 {
                color: orange;
                margin: 0;
            }

        }
    }

    .pingpu {
        h1 {
            font-size: 25px;

        }

        span {
            font-size: 20px;
            color: red;
        }

        display: flex;
        justify-content: space-between;
        align-items: center;

        .colon {
            display: inline-block;
            margin: 0 4px;
            color: #ee0a24;
        }

        .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #ee0a24;
        }
    }
}

//
</style>


